<template>
  <BaseBreadcrumb />
  <BaseTable
    ref="baseTable"
    :columns="columns"
    :params="search"
    :form="form"
    :update-params="formItems"
    :api="MENU_API_PRE_SUFFER"
    :table-name="'菜单'"
    :on-before-update="beforeUpdate"
  />
</template>

<script lang="ts" setup>
import { formItems } from './forms'

import { ref, reactive, onMounted } from 'vue'
import { columns } from './columns'
import { search } from './search'
import { menu } from '../../../entity/system/menu'

import { MENU_API_PRE_SUFFER, menuTree } from '../../../api/system/menu'
import { BaseType, CascaderParams, FormItemProps } from '@/components/base/form-item/props'
import { SearchValue } from '@/components/base/form-item/BaseFormItem.vue'
const form = reactive<menu>({
  icon: '',
  id: '',
  name: '',
  orderNum: '',
  parentId: '',
  perms: '',
  type: '',
  url: '',
} as unknown as menu)
function beforeUpdate(formState: menu) {
  if (formState.parentId) {
    formState.parentId = formState.parentId[formState.parentId.length - 1]
  } else {
    formState.parentId = ''
  }
}
onMounted(async () => {
  const parentId = formItems.value.find((val) => val.name == 'parentId')?.params as CascaderParams
  if (parentId) {
    const { data } = await menuTree({})
    parentId.options = data
  }
})
</script>

<style scoped lang="scss"></style>
